<!DOCTYPE html>
<html lang="en">
<?php
// 启动会话
session_start();
?>

<script>
    function userIsLoggedIn() {
        // 在这里实现用户登录状态的检查逻辑
        // 返回值为布尔值，true 表示用户已登录，false 表示用户未登录
        // 示例：检查用户是否具有有效的登录凭据
        // 这里改为检查会话中的登录状态
        return <?php echo isset($_SESSION['loggedin']) && $_SESSION['loggedin'] ? 'true' : 'false'; ?>;
    }

    // 在页面加载时检查用户登录状态
    window.addEventListener('DOMContentLoaded', function() {
        if (!userIsLoggedIn()) {
            window.location.href = '../Login.php';
        }
    });
</script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户管理</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap.min441.css">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/jquery-ui.css">
    <link rel="stylesheet" href="../css/bootstrap-select.css">
</head>

<body>
    <div class="container">
        <!-- 预定管理 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">酒店后台管理系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item ">
                        <a class="nav-link" href="./预购订单管理.php">预订管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./房态查询页面.php">房态查询<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./房间状态管理.php">房态管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./后台房源管理页面.php">房源管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./客户管理页面.php">客户管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="./账户管理页面.php">账户管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./留言后台查看界面.php">留言管理<span class="sr-only">(current)</span></a>
                    </li>


                    <li class="nav-item">
                        <a class="nav-link" href="../backend01.php">退回主页<span class="sr-only">(current)</span></a>
                    </li>

                </ul>
            </div>
        </nav>

        <div class="container">
            <h1>账户管理</h1>
            <button id="addCustomerBtn" class="btn btn-primary mb-3" data-toggle="modal" data-target="#addCustomerModal">注册账号</button>
            <input type="text" id="searchCustomerInput" class="form-control mb-3" placeholder="搜索账号">
            <h1>账号列表</h1>
            <button id="loadCustomersBtn" class="btn btn-warning">加载账号数据</button>
            <table class="table">
                <thead>
                    <tr>
                        <th>账号ID</th>
                        <th>姓名</th>
                        <th>账号</th>
                        <th>密码</th>
                        <th>角色</th>
                        <th>注册时间</th>
                        <th>最后登录时间</th>
                        <th>登录次数</th>
                        <th>账号状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="customerList">
                    <!-- 这里将会动态生成账号列表 -->
                </tbody>
            </table>
        </div>



        <!-- 注册账号的模态框 -->
        <div class="modal" id="addCustomerModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">注册账号</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="section2">
                        <form action="../backend/api/registrationBackendPage.php" method="post" onsubmit="return validateRegistrationForm()" id="registrationForm">
                            <div class="form-group">
                                <label for="name">姓名</label>
                                <input type="text" class="form-control" id="name" placeholder="请输入姓名" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="phone">电话号码</label>
                                <input type="tel" class="form-control" id="phone" placeholder="请输入电话号码" name="phone" required>
                            </div>
                            <div class="form-group">
                                <label for="password">密码</label>
                                <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password" required>
                            </div>
                            <div class="form-group">
                                <label for="confirmPassword">确认密码</label>
                                <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入密码" name="confirmPassword" required>
                            </div>
                            <button type="submit" class="btn btn-primary">注册</button>
                        </form>

                    </div>
                </div>
            </div>
        </div>



        <!-- 编辑模态框 -->
        <!-- 模态框结构 -->
        <div id="editModal" class="modal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">编辑账号</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="editForm">
                            <input type="hidden" name="id" id="editId">
                            <div class="mb-3">
                                <input type="text" class="form-control" id="editUsername" placeholder="用户名">
                            </div>
                            <div class="mb-3">
                                <input type="text" class="form-control" id="editPhone" placeholder="电话">
                            </div>
                            <div class="mb-3">
                                <input type="password" class="form-control" id="editPassword" placeholder="密码">
                            </div>
                            <div class="mb-3">
                                <input type="text" class="form-control" id="editRole" placeholder="角色">
                            </div>
                            <div class="mb-3">
                                <input type="text" class="form-control" id="editStatus" placeholder="状态">
                            </div>
                            <div class="d-flex justify-content-between">
                                <button type="button" class="btn btn-secondary" id="editCancel" data-bs-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" id="editSubmit">提交</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


    </div>
</body>

<script>
    // 表单验证
    function validateRegistrationForm() {
        var name = document.querySelector('#section2 input[name="name"]').value;
        var phone = document.querySelector('#section2 input[name="phone"]').value;
        var password = document.querySelector('#section2 input[name="password"]').value;
        var confirmPassword = document.querySelector('#section2 input[name="confirmPassword"]').value;

        if (name.trim() === "") {
            alert("请输入姓名");
            return false;
        }

        if (phone.trim() === "") {
            alert("请输入电话号码");
            return false;
        }

        if (!validatePhone(phone)) {
            alert("电话号码格式不正确");
            return false;
        }

        if (password.trim() === "") {
            alert("请输入密码");
            return false;
        }

        if (confirmPassword.trim() === "") {
            alert("请再次输入密码");
            return false;
        }

        if (password !== confirmPassword) {
            alert("两次输入的密码不一致");
            return false;
        }

        return true;
    }
    // 电话号码格式验证
    function validatePhone(phone) {
        var phoneRegex = /^1[0-9]{10}$/;
        return phoneRegex.test(phone);
    }
</script>

<!-- js代码 -->
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/bootstrap.min441.js"></script>
<script>
    $(document).ready(function() {
        // 注册
        $('#registrationForm').submit(function(event) {
            event.preventDefault();
            // 获取表单数据
            var formData = $(this).serialize();
            console.log(formData);
            $.ajax({
                type: 'POST',
                url: '../backend/api/registrationBackendPage.php',
                data: formData,
                success: function(response) {
                    // 请求成功时的操作
                    console.log(response); // 可以在控制台打印服务器的响应信息
                    // 可以在这里进行页面跳转或显示成功消息等操作
                    // 跳转到
                    window.location.href = '账户管理页面.php';


                },
                error: function(xhr, status, error) {
                    // 请求失败时的操作
                    console.log(xhr.responseText); // 可以在控制台打印错误信息
                }
            });
        });

        // 查询操作
        $("#loadCustomersBtn").click(function() {
            $.ajax({
                url: '../backend/api/accountManagementpage_1.php',
                type: 'GET',
                success: function(response) {
                    $("#customerList").html(response);
                }
            });
        });

        $(document).on('click', '.deleteBtn', function() {
            var accountId = $(this).data("accountid");
            console.log(accountId);
            // 弹出确认对话框
            var result = confirm("确定要删除该账号吗？");
            // 根据用户的选择结果进行处理
            if (result) {
                // 发送 POST 请求到后端以触发删除功能
                $.post("../backend/api/accountManagementpage_4.php", {
                    accountId: accountId
                }, function(data, status) {
                    console.log("Response: " + data);
                    // 处理删除成功或失败的情况
                });
            }
        });






        // 模态框操作
        // 当点击编辑按钮时
        // 编辑按钮点击事件
        $(document).on('click', '.editBtn', function() {
            var accountId = $(this).data('accountid'); // 获取账号ID
            console.log(accountId);
            // 根据账号ID从数据库中获取账号信息，并填充到模态框中
            // 发送 AJAX 请求到后端获取账号信息
            $.ajax({
                url: '../backend/api/accountManagementpage_2.php',
                method: 'POST',
                data: {
                    accountId: accountId
                },
                dataType: 'json',
                success: function(response) {
                    console.log(response);
                    // 填充数据到模态框
                    $('#editId').val(response.account_id);
                    $('#editUsername').val(response.username);
                    $('#editPhone').val(response.phone);
                    $('#editPassword').val(response.password);
                    $('#editRole').val(response.role);
                    $('#editStatus').val(response.status);

                    // 显示模态框
                    $('#editModal').show();
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });

        // 点击取消按钮时
        $('#editCancel').click(function() {
            // 隐藏模态框
            $('#editModal').hide();
        });

        // 点击提交按钮时
        // 点击提交按钮时
        $('#editSubmit').click(function() {
            // 获取填写的数据
            var accountId = $('#editId').val(); // 获取账号ID
            var editedUsername = $('#editUsername').val();
            var editedPhone = $('#editPhone').val();
            var editedPassword = $('#editPassword').val();
            var editedRole = $('#editRole').val();
            var editedStatus = $('#editStatus').val();

            console.log(accountId, editedUsername, editedPhone, editedPassword, editedRole, editedStatus);
            // 执行更新操作，将填写的数据提交到后端进行更新
            $.ajax({
                url: '../backend/api/accountManagementpage_3.php',
                method: 'POST',
                data: {
                    accountId: accountId,
                    editedUsername: editedUsername,
                    editedPhone: editedPhone,
                    editedPassword: editedPassword,
                    editedRole: editedRole,
                    editedStatus: editedStatus
                },
                success: function(response) {
                    // 更新成功，显示成功消息
                    console.log(response);

                    // 隐藏模态框
                    $('#editModal').hide();
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });
    });
</script>

</html>